<template>
  <div class="innerzon">
    <!-- 左边 -->
    <div class="left-module">
      <!-- 真烟异流 -->
      <div class="smoke-flow">
        <div class="public-top true-flow"></div>
        <div class="sf-main">
          <!-- 真烟流出 -->
          <!-- 真烟流出标题 -->
          <div class="sf-topic true-out-flow"></div>
          <!-- 俩个大饼 -->
          <div class="sf-con-main">
            <div
              class="sfcm-item"
              v-for="(item, index) in smokeFlowData.kindArr"
              :key="index + 'sfcm'"
            >
              <!-- <img src="../../assets/img/ng-icon.png" class="icon" v-if="index == 1"/>
              <img src="../../assets/img/ng-icon2.png" class="icon" v-if="index == 0"/> -->
              <div class="sfcm-item-detail">
                <div class="pie-detail">
                  <div class="big-num">
                    {{ item.num }}
                    <b v-if="item.unit">({{ item.unit }})</b>

                    <span v-if="!item.unit">%</span>
                    <img
                      v-if="item.isTrend && !item.unit"
                      src="../../assets/common-new/red-top.png"
                    />
                    <img
                      v-if="!item.isTrend && !item.unit"
                      src="../../assets/common-new/green-down.png"
                    />
                  </div>
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 流出地区\流出品规 -->
          <div class="sf-list">
            <!-- tab标题 -->
            <div class="sf-list-tab">
              <div
                class="item"
                v-for="(item, index) in smokeFlowData.tabList"
                :key="'tab' + index"
                :class="tabFlag == index ? 'is-check pointer' : 'pointer'"
                @click="tabHandle(index)"
              >
                {{ item }}
              </div>
            </div>
            <!-- 列表 -->
            <!-- 1、流出地区 -->
            <div class="sf-list-main" v-if="tabFlag == 0">
              <smoke-flow-item
                widthNum="178"
                titWidth="70"
                :list="smokeFlowData.placeRank"
              ></smoke-flow-item>
              <div class="echart-pie">
                <pie-echart
                  ref="smokePie1"
                  :echartData="smokeFlowData.echartData"
                ></pie-echart>
              </div>
            </div>
            <!-- 2、流出品规 -->
            <div class="sf-list-main" v-if="tabFlag == 1">
              <smoke-flow-item
                widthNum="228"
                titWidth="130"
                :list="smokeFlowData.produceRank"
              ></smoke-flow-item>
            </div>
          </div>

          <!-- 真烟查获 -->
          <div class="sf-topic true-check"></div>
          <div class="sf-con-main">
            <div
              class="sfcm-item"
              v-for="(item, index) in smokeSeizure.kindArr"
              :key="index + 'sfcm'"
            >
              <!-- <img src="../../assets/img/ng-icon3.png" v-if="index==0" class="icon" />
              <img src="../../assets/img/ng-icon4.png" v-if="index==1" class="icon" /> -->

              <div class="sfcm-item-detail">
                <div class="pie-detail">
                  <div class="big-num">
                    {{ item.num }}
                    <b v-if="item.unit">({{ item.unit }})</b>
                    <span v-if="!item.unit">%</span>
                    <img
                      v-if="item.isTrend && !item.unit"
                      src="../../assets/common-new/green-top.png"
                    />
                    <img
                      v-if="!item.isTrend && !item.unit"
                      src="../../assets/common-new/red-down.png"
                    />
                  </div>
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="sf-list">
            <div class="sf-list-tab">
              <div
                class="item"
                v-for="(item, index) in smokeSeizure.tabList"
                :key="'tab' + index"
                :class="tabFlagSecond == index ? 'is-check pointer' : 'pointer'"
                @click="tabSecondHandle(index)"
              >
                {{ item }}
              </div>
            </div>
            <div class="sf-list-main" v-if="tabFlagSecond == 0">
              <smoke-flow-item
                widthNum="178"
                titWidth="70"
                :list="smokeSeizure.placeRank"
              ></smoke-flow-item>
              <div class="echart-pie">
                <pie-echart
                  ref="smokePie2"
                  :echartData="smokeSeizure.echartData"
                ></pie-echart>
              </div>
            </div>
            <div class="sf-list-main" v-if="tabFlagSecond == 1">
              <smoke-flow-item
                widthNum="228"
                titWidth="135"
                :list="smokeSeizure.produceRank"
              ></smoke-flow-item>
            </div>
          </div>
        </div>
      </div>

      <!-- 真烟案件 -->
      <div class="smoke-case">
        <div class="public-top true-case"></div>
        <div class="sc-main">
          <!-- 真烟案件 -->
          <div class="smoke-case-tab">
            <div
              class="item"
              v-for="(item, index) in ['真烟流出', '真烟查获']"
              :key="'tab' + index"
              :class="
                tabSmallFlag == index ? 'tabsmall-is-check pointer' : 'pointer'
              "
              @click="secondaryTabHandle(index)"
            >
              {{ item }}
            </div>
          </div>
          <smoke-case-echart
            ref="smokeCaseLine"
            :idName="'smokeCaseLine'"
            :echartData="smokeCase.totalTrend"
            v-if="tabSmallFlag == 0"
          ></smoke-case-echart>
          <smoke-case-echart
            ref="smokeCaseLine0"
            :idName="'smokeCaseLine0'"
            :echartData="smokeCase.flowTrend"
            v-if="tabSmallFlag == 1"
          ></smoke-case-echart>
        </div>
      </div>
    </div>

    <!-- 中间 -->
    <div class="center-module">
      <!-- 地图 -->
      <div class="map-style positiondiv">
        <div class="dflex width100per" style="padding-top: 20px">
          <div class="maptableft" style="">
            <!-- <div class="centitlebg total-situaion"></div> -->
            <div class="">
              <span
                style="margin-left: 10px"
                v-for="(item, index) in clickArea"
                :key="item"
              >
                <!-- <img src="../../assets/common-new/back.png" alt="" /> -->
                <div class="prov" @click="mapBack(index)">
                  {{ item }}
                  <span v-if="index != clickArea.length - 1"> / </span>
                </div>
              </span>
            </div>
          </div>
        </div>
        <div id="neiguan" style="width: 80%; height: 500px"></div>
        <!-- 增加图例 -->
        <!-- <div class="pjjgdiv">
          <div class="fontsize14 fontweight whitecolor">评价结果</div>
          <div class="compj">
            <div v-for="(item, index) in maplist.maplistb" :key="index">
              <div
                class="blockcolor marginright6px lineblock fontsize14 whitecolor"
                :style="'background:' + item.color"
              ></div>
              {{ item.name }}
            </div>
          </div>
        </div> -->
        <div class="width212px paimingList">
          <div class="width100per">
            <div class="paimingTitle">真烟外流数量排名</div>
            <ul class="width100per sortmapul">
              <li>
                <div
                  class="width100per dflex fontsize14 fontweight whitecolor justifybetween"
                >
                  <div class="widthdiv43">排名</div>
                  <div class="parthalfflex4">单位</div>
                  <div class="parthalfflex6">流出量(万支)</div>
                  <!-- <div>等级</div> -->
                </div>
              </li>
              <!--                 :class="{
                  bgA: item.sort == 'A',
                  bgB: item.sort == 'B',
                  bgC: item.sort == 'C',
                }" -->
              <li
                v-for="(item, index) in qsjydata.list"
                :key="index"
                class="bgB"
              >
                <div
                  class="width100per dflex fontsize14 justifybetween alignitemflexstart"
                  :style="
                    item.sort == 'B' ? 'color:#42C7DE' : 'color:#ffffffb2'
                  "
                >
                  <div class="widthdiv43">{{ index + 1 }}</div>
                  <div class="parthalfflex45">{{ item.unit }}</div>
                  <div class="parthalfflex">
                    <count-to
                      :startVal="0"
                      :endVal="Number(item.num)"
                      :duration="3000"
                      :decimals="2"
                    ></count-to>
                  </div>
                  <div>{{ item.sort }}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- <anhui-map :zoom="1.2"></anhui-map> -->
      </div>
      <!-- 真烟外流趋势分析 -->
      <div class="smoke-trend">
        <div class="big-public-top"></div>
        <div class="smoke-trend-main">
          <!-- 真烟外流趋势分析 -->
          <div class="smoke-trend-tab">
            <div
              class="item"
              v-for="(item, index) in ['外流总量趋势', '流销比趋势']"
              :key="'tab' + index"
              :class="
                lineFlag == index ? 'tabsmall-is-check pointer' : 'pointer'
              "
              @click="lineTabHandle(index)"
            >
              {{ item }}
            </div>
          </div>
          <provinecharts
            :grid="provinechartsGrid"
            ref="provine"
            v-if="showWhatecharts"
          ></provinecharts>
          <provincialbiqs
            :grid="provinechartsGrid"
            :data="listLxbqs"
            v-if="!showWhatecharts"
          ></provincialbiqs>
          <!-- <smoke-trend-line
            :idName="'smokeTrendLine'"
            :echartData="smokeTrend.totalTrend"
            v-if="lineFlag == 0"
          ></smoke-trend-line>
          <smoke-trend-line
            :idName="'smokeTrendLine0'"
            :echartData="smokeTrend.flowTrend"
            v-if="lineFlag == 1"
          ></smoke-trend-line> -->
        </div>
      </div>
    </div>

    <!-- 右边 -->
    <div class="right-module">
      <!-- 预警监测 -->
      <div class="early-warning">
        <div class="public-top warning-check"></div>
        <div class="ew-main">
          <div class="ew-con-main">
            <div
              class="sfcm-item"
              v-for="(item, index) in earlyWarningData.kindArr"
              :key="index + 'sfcm'"
              @click="isShow(index, 'sfcm')"
            >
              <!-- <img src="../../assets/img/ng-icon1.png" v-if="index == 1" class="icon" />
               <img src="../../assets/img/ng-icon5.png" v-if="index == 0" class="icon" /> -->
              <div class="sfcm-item-detail">
                <div class="pie-detail">
                  <div v-if="item.num !== '-'" class="big-num">
                    <CountTo
                      :startVal="startVal"
                      :endVal="item.num"
                      :duration="duration"
                      v-if="item.unit"
                    />
                    {{ item.unit ? "" : item.num }}
                    <b v-if="item.unit">({{ item.unit }})</b>

                    <span v-if="!item.unit">%</span>
                    <img
                      v-if="item.isTrend && !item.unit"
                      src="../../assets/common-new/red-top.png"
                    />
                    <img
                      v-if="!item.isTrend && !item.unit"
                      src="../../assets/common-new/green-down.png"
                    />
                  </div>
                  <div v-else class="big-num">-</div>
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="ew-topic warning-check"></div>
          <div class="sle-category">
            <skill-level-eacht
              ref="sleCategory"
              :echartData="earlyWarningData.echartData"
            ></skill-level-eacht>
          </div>
        </div>
      </div>

      <!-- 监督检查 -->
      <div class="super-review">
        <div class="public-top watch-check"></div>
        <div class="sr-main">
          <div class="inspect-list">
            <div
              class="item"
              v-for="(item, index) in superReviewData.reviewList"
              :key="index + 'item'"
              @click="isShow(index, 'super')"
            >
              <!-- <img :src="item.src" class="icon" /> -->
              <div class="item-detail">
                <span>{{ item.name }}</span>
                <div class="big-num">
                  <CountTo
                    :startVal="startVal"
                    :endVal="item.value"
                    :duration="duration"
                  />
                  <b>({{ item.unit }})</b>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="inspect-list">
            <div
              class="item"
              v-for="(item, index) in superReviewData.radioList"
              :key="index + 'item'"
            >
              <img :src="item.src" class="icon" />
              <div class="item-detail">
                {{ item.name }}
                <div class="small-num">
                  {{ item.radio }}
                  <img
                    v-if="item.isTrend"
                    src="../../assets/common-new/green-top.png"
                    
                  />
                  <img
                    v-else
                    src="../../assets/common-new/red-down.png"
                    
                  />
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>

      <!-- 外流重点户 -->
      <div class="key-household">
        <div class="public-top out-flow"></div>
        <div class="kh-main">
          <div class="ew-con-main">
            <div
              class="sfcm-item"
              v-for="(item, index) in keyHouseholdData.kindArr"
              :key="index + 'sfcm'"
              @click="isShow(index, 'wailiu')"
            >
              <!-- <img
                src="../../assets/img/ng-pers.png"
                class="icon"
                style="margin-left: 10px"
                v-if="index == 0"
              />
              <img
                src="../../assets/img/ng-pers1.png"
                class="icon"
                style="margin-left: 10px"
                v-if="index == 1"
              /> -->
              <div class="sfcm-item-detail">
                <div class="pie-detail">
                  <div class="big-num">
                    <CountTo
                      :startVal="startVal"
                      :endVal="item.num"
                      :duration="duration"
                      v-if="item.unit"
                    />
                    {{ item.unit ? "" : item.num }}
                    <b v-if="item.unit">({{ item.unit }})</b>

                    <span v-if="!item.unit">%</span>
                    <img
                      v-if="item.isTrend && !item.unit && item.num !== '0.00'"
                      src="../../assets/common-new/red-top.png"
                    />
                    <img
                      v-if="!item.isTrend && !item.unit && item.num !== '0.00'"
                      src="../../assets/common-new/green-down.png"
                    />
                  </div>
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="ew-topic out-flow-TOP5"></div>
          <div class="pictorialBar">
            <outFlowClient
              ref="outFlowClient"
              :echartData="keyHouseholdData.echartData"
            />
            <!-- <pictorial-bar></pictorial-bar> -->
          </div>
        </div>
      </div>
    </div>

    <div class="mask-postion" v-if="popShow">
      <pop-table @isHide="isHide" v-if="popFlag == 'sfcm'"></pop-table>
      <big-pop-table
        @isHide="isHide"
        v-if="popFlag == 'wailiu'"
      ></big-pop-table>
      <pop-echart @isClose="isClose" v-if="popFlag == 'super'"></pop-echart>
    </div>
  </div>
</template>
<script>
import smokeFlowItem from "@/components/innerzon/smokeFlowItem";
import pieEchart from "@/components/innerzon/pie";
import smokeCaseEchart from "@/components/innerzon/smokeCaseEchart";
import anhuiMap from "@/components/echart/anhuiMap";
import smokeTrendLine from "@/components/innerzon/smokeTrendLine";
import skillLevelEacht from "@/components/innerzon/skillLevelEacht";
import pictorialBar from "@/components/innerzon/pictorialBar";
import outFlowClient from "@/components/innerzon/outFlowClient";
import popTable from "@/components/innerzon/popTable";
import bigPopTable from "@/components/innerzon/bigPopTable";
import popEchart from "@/components/innerzon/popEchart";
import Anhui from "@/mapdata/anhui/anhui.json";
import provinecharts from "./provincialecharts";
import provincialbiqs from "./provincialbiqs";
import {getShortName} from '@/utils/convertName.js'
import axios from "axios";
import {
  getInFlowCityRank,
  getInFlowGoodsRank,
  getOutFlowTotalNum,
  getInFlowTotalNum,
  getOutFlowStat,
  getInFlowStat,
  getWarnNum,
  getCheckStat,
  getOutflowLargeLicNum,
  getOutflowCityRank,
  getoutFlowGoodsRank,
  getoutFlowNumRank,
} from "@/api/innerzon.js";
import {
  getOutflowSaleRadioTrend,
  getOutflowTotalNumTrend,
} from "@/api/inner.js";
import {
  updateDtQuestion
} from "@/api/common.js";

export default {
  props: {
    picktimeTemp: {
      type: Object,
      required:true,
    },
  },
  watch: {
    picktimeTemp: {
      handler(newVal) {
        console.log('内管时间',newVal);
        // this.initData("prov_org_uuid", "00000000000000000000000011340001",'安徽省');
        this.initData(
          "prov_org_uuid",
          "prov_org_uuid",
          "city_org_uuid",
          "city_org_name",
          "00000000000000000000000011340001",
          '安徽省',
        );
      },
      deep: true,
    },
  },
  data() {
    return {
      // 数据加载次数
      dataLoadingCnt: 0,
      provinechartsGrid: {
        top: "20%",
        left: "10%",
        right: "5%",
        bottom: "35%",
        // containLabel: true
      },
      listLxbqs: [],
      listWl: [],
      showWhatecharts: "provinecharts",
      // 真烟流出
      smokeFlowData: {
        tabList: ["流出地区 Top5", "流出品规 Top5"],
        kindArr: [],
        placeRank: [],
        produceRank: [
          {
            place: "红三环(渡江)",
            value: 100,
            num: 78.18,
            unit: "万支",
            radio: 191.72,
            isTrend: true,
          },
          {
            place: "黄山(嘉宾迎客松)",
            value: 78,
            num: 55.58,
            unit: "万支",
            radio: 10.58,
            isTrend: true,
          },
          {
            place: "黄山(新一品)",
            value: 60,
            num: 53.78,
            unit: "万支",
            radio: 25.77,
            isTrend: true,
          },
          {
            place: "黄山(印象一品)",
            value: 50,
            num: 47.26,
            unit: "万支",
            radio: 191.37,
            isTrend: true,
          },
          {
            place: "利群(新版)",
            value: 50,
            num: 46.38,
            unit: "万支",
            radio: 30.8,
            isTrend: true,
          },
        ],
        echartData: [
          {
            name: "亳州市",
            value: 19.71,
            num: 83.9,
          },
          {
            name: "阜阳市",
            num: 74.82,
            value: 17.58,
          },
          {
            name: "合肥市",
            num: 56.88,
            value: 13.36,
          },
          {
            name: "蚌埠市",
            num: 38.48,
            value: 9.04,
          },
          {
            name: "淮南市",
            num: 32.18,
            value: 7.56,
          },
          {
            name: "其他",
            num: 139.42,
            value: 32.75,
          },
        ],
      },
      // 真烟查获
      smokeSeizure: {
        tabList: ["查获地区 Top5", "查获品规 Top5"],
        kindArr: [],
        placeRank: [],
        produceRank: [],
        echartData: [],
      },

      // 真烟案件
      smokeCase: {
        totalTrend: {
          flag: ["单2", "单5", "单10", "单20", "单30及以上"],
          data: [], // 卷烟数量
          lineData: [], // 案件数
          codes:['both_2_case','both_5_case','both_10_case','both_20_case','both_30_case'],
        },
        flowTrend: {
          flag: ["双2", "双5", "双10", "双20", "双30及以上"],
          data: [],
          lineData: [],
        },
      },

      // 真烟外流趋势分析
      smokeTrend: {
        totalTrend: {
          max: 500,
          min: 0,
          unit: "单位：(万支)",
          date: [
            "2022.5",
            "2022.6",
            "2022.7",
            "2022.8",
            "2022.9",
            "2022.10",
            "2022.11",
            "2022.12",
            "2023.1",
            "2023.2",
            "2023.3",
            "2023.4",
          ],
          data: [
            173.1, 111.3, 135.3, 102.1, 227.54, 134.9, 111.1, 99.84, 366.53,
            177.82, 136.32, 159.18,
          ],
        },
        flowTrend: {
          max: 0.03,
          min: 0,
          unit: "(%)",
          date: [
            "2022.5",
            "2022.6",
            "2022.7",
            "2022.8",
            "2022.9",
            "2022.10",
            "2022.11",
            "2022.12",
            "2023.1",
            "2023.2",
            "2023.3",
            "2023.4",
          ],
          data: [
            0.03, 0.02, 0.02, 0.01, 0.03, 0.02, 0.02, 0.03, 0.02, 0.03, 0.02,
            0.03,
          ],
        },
      },
      //   预警监测
      earlyWarningData: {
        kindArr: [],
        echartData: {
          valueArr: [],
          areaArr: [],
        },
      },

      // 监督检查
      superReviewData: {
        reviewList: [
          {
            name: "监督检查",
            value: 24,
            code: "checkData",
            unit: "次",
            src: require("../../assets/neiguan-new/watch-check-data.png"),
          },
          {
            name: "发现问题",
            value: 115,
            unit: "次",
            code: "abnormalData",
            src: require("../../assets/neiguan-new/find-problem-data.png"),
          },
          {
            name: "整改建议",
            value: 118,
            unit: "次",
            code: "suggestData",
            src: require("../../assets/neiguan-new/zhenggaijianyi.png"),
          },
          {
            name: "整改反馈",
            value: 116,
            unit: "次",
            code: "feedbackData",
            src: require("../../assets/neiguan-new/zhenggaifankui-title.png"),
          },
        ],
      },

      //外流重点户
      keyHouseholdData: {
        kindArr: [],
        echartData: {
          valueArr: [],
          areaArr: [],
        },
      },
      // ========
      tabFlag: 0,
      tabFlagSecond: 0,
      startVal: 0,
      duration: 3000,
      endVal: 864.0,
      tabSmallFlag: 0,
      lineFlag: 0,
      popShow: false,
      popFlag: "",
      regionsdata: [
        {
          name: "蚌埠市",
          namea: "蚌埠",
          littitle: "B",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010340301',
        },
        {
          name: "合肥市",
          namea: "合肥",
          littitle: "A",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000011340101',

        },
        {
          name: "芜湖市",
          namea: "芜湖",
          littitle: "B",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010340201',

        },
        {
          name: "宣城市",
          namea: "宣城",
          littitle: "B",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010341801',

        },
        {
          name: "池州市",
          namea: "池州",
          littitle: "B",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010341701',

        },
        {
          name: "亳州市",
          namea: "亳州",
          littitle: "B",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010341601',

        },
        {
          name: "铜陵市",
          namea: "铜陵",
          littitle: "A",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010340701',

        },
        {
          name: "淮北市",
          namea: "淮北",
          littitle: "B",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010340601',

        },
        {
          name: "淮南市",
          namea: "淮南",
          littitle: "C",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010340401',

        },
        {
          name: "黄山市",
          namea: "黄山",
          littitle: "B",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010341001',

        },
        {
          name: "安庆市",
          namea: "安庆",
          littitle: "A",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010340801',

        },
        {
          name: "滁州市",
          namea: "滁州",
          littitle: "B",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010341101',

        },
        {
          name: "阜阳市",
          namea: "阜阳",
          littitle: "C",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010341201',

        },
        {
          name: "宿州市",
          namea: "宿州",
          littitle: "B",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010341301',

        },
        {
          name: "马鞍山市",
          namea: "马鞍山",
          littitle: "B",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010340501',

        },
        {
          name: "六安市",
          namea: "六安",
          littitle: "A",
          itemStyle: {
            color: "rgba(30, 141, 171, 1)", //省份背景色
          },
          uuid:'00000000000000000000000010341501',

        },
      ],
      maplist: {
        maplistb: [
          {
            name: "A：优≥80",
            color: "#1E8DAB",
          },
          {
            name: "B：80＞良≥60",
            color: "#056B9E",
          },
          {
            name: "C：差＜60",
            color: "#00693F",
          },
        ],
      },
      qsjydata: {
        list: [],
      },
      clickArea: ["安徽省"],
      titleMap: {
        name: "安徽省",
        uuid: "00000000000000000000000011340001",
        level: 1,
        oldName: "安徽省",
        countyUuid: "",
      },
      dataMaps: {
        安徽省: 340000,
        合肥市: 340100,
        瑶海区: 340102,
        庐阳区: 340103,
        蜀山区: 340104,
        包河区: 340111,
        长丰县: 340121,
        肥东县: 340122,
        肥西县: 340123,
        庐江县: 340124,
        巢湖市: 340181,
        芜湖市: 340200,
        镜湖区: 340202,
        鸠江区: 340207,
        弋江区: 340209,
        湾沚区: 340210,
        繁昌区: 340211,
        南陵县: 340223,
        无为市: 340281,
        蚌埠市: 340300,
        龙子湖区: 340302,
        蚌山区: 340303,
        禹会区: 340304,
        淮上区: 340311,
        怀远县: 340321,
        五河县: 340322,
        固镇县: 340323,
        淮南市: 340400,
        大通区: 340402,
        田家庵区: 340403,
        谢家集区: 340404,
        八公山区: 340405,
        潘集区: 340406,
        凤台县: 340421,
        寿县: 340422,
        马鞍山市: 340500,
        花山区: 340503,
        雨山区: 340504,
        博望区: 340506,
        当涂县: 340521,
        含山县: 340522,
        和县: 340523,
        淮北市: 340600,
        杜集区: 340602,
        相山区: 340603,
        烈山区: 340604,
        濉溪县: 340621,
        铜陵市: 340700,
        铜官区: 340705,
        义安区: 340706,
        郊区: 340711,
        枞阳县: 340722,
        安庆市: 340800,
        迎江区: 340802,
        大观区: 340803,
        宜秀区: 340811,
        怀宁县: 340822,
        太湖县: 340825,
        宿松县: 340826,
        望江县: 340827,
        岳西县: 340828,
        桐城市: 340881,
        潜山市: 340882,
        黄山市: 341000,
        屯溪区: 341002,
        黄山区: 341003,
        徽州区: 341004,
        歙县: 341021,
        休宁县: 341022,
        黟县: 341023,
        祁门县: 341024,
        滁州市: 341100,
        琅琊区: 341102,
        南谯区: 341103,
        来安县: 341122,
        全椒县: 341124,
        定远县: 341125,
        凤阳县: 341126,
        天长市: 341181,
        明光市: 341182,
        阜阳市: 341200,
        颍州区: 341202,
        颍东区: 341203,
        颍泉区: 341204,
        临泉县: 341221,
        太和县: 341222,
        阜南县: 341225,
        颍上县: 341226,
        界首市: 341282,
        宿州市: 341300,
        埇桥区: 341302,
        砀山县: 341321,
        萧县: 341322,
        灵璧县: 341323,
        泗县: 341324,
        六安市: 341500,
        金安区: 341502,
        裕安区: 341503,
        叶集区: 341504,
        霍邱县: 341522,
        舒城县: 341523,
        金寨县: 341524,
        霍山县: 341525,
        亳州市: 341600,
        谯城区: 341602,
        涡阳县: 341621,
        蒙城县: 341622,
        利辛县: 341623,
        池州市: 341700,
        贵池区: 341702,
        东至县: 341721,
        石台县: 341722,
        青阳县: 341723,
        宣城市: 341800,
        宣州区: 341802,
        郎溪县: 341821,
        泾县: 341823,
        绩溪县: 341824,
        旌德县: 341825,
        宁国市: 341881,
        广德市: 341882,
      },
      dataMap: require("../../mapdata/anhui/anhui.json"),

    };
  },
  components: {
    smokeFlowItem,
    pieEchart,
    smokeCaseEchart,
    anhuiMap,
    smokeTrendLine,
    skillLevelEacht,
    pictorialBar,
    popTable,
    popEchart,
    bigPopTable,
    outFlowClient,
    provinecharts,
    provincialbiqs,
  },
  created() {
    // this.timer = setInterval(this.getTime, 1000);
    // this.initData(
    //       "prov_org_uuid",
    //       "prov_org_uuid",
    //       "city_org_uuid",
    //       "city_org_name",
    //       "00000000000000000000000011340001",
    //       '安徽省',
    //     );
  },
  mounted() {
    //  this.mapshow(
    //     {
    //       ename: Anhui,
    //       name: "安徽",
    //     },
    //     "neiguan"
    //   ); //初始地图

    this.mapneiguan("neiguan");
  },
  beforeDestroy() {},
  methods: {
    initData(columnName,columnName1,columnName2,columnName3,orgUuid,name) {
      let that = this;
      that.tabFlag = 0
      that.tabFlagSecond = 0
      that.tabSmallFlag = 0
      that.lineTabHandle(0)

     /*  let addres = that.dataMaps[name];
          if (that.titleMap.level == 1 ) {
            addres += "_full.json";
          } else {
            addres += ".json";
          }
          axios
            .get("https://geo.datav.aliyun.com/areas_v3/bound/" + addres)
            .then(function (res) {
              that.dataMap = res.data;

              // that.mapCrackDown("centerMap");
              // that.clickArea.push()
              that.mapneiguan("neiguan");

            })
            .catch(function (error) {
              console.log(error);
            }); */
      getOutflowTotalNumTrend({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      }).then((res) => {
        if (that.dataLoadingCnt == 1) {
          that.updateDtQuestion121(res);
        }
        that.listWl = res.outflowTotalNumTrend.data;
        that.$refs.provine.init(that.listWl);
      });
      getOutflowSaleRadioTrend({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      }).then((res) => {
        console.log(res, "真烟外流流销比趋势分析数据");
        if (that.dataLoadingCnt == 1) {
          that.updateDtQuestion122(res);
        }
        that.listLxbqs = res.outflowSaleRadioTrend.data;
      });
      getoutFlowNumRank({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      }).then((res) => {
        console.log(res, "地图数据==========");
        that.qsjydata.list = res.outflowData.data.map((k) => {
          return {
            unit: k.org_name,
            num: k.cigarNum,
            // sort: k.score_result,
          };
        });
      });
      // 外流数据
      getOutflowCityRank({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      })
        .then((res) => {
          console.log(res, "外流数据==========");
          debugger;
          if (that.dataLoadingCnt == 1) {
            that.updateDtQuestion115(res);
          }
          that.smokeFlowData.placeRank = res.outflowCityRanking.data
            .slice(0, 5)
            .map((k) => {
              return {
                place: k.org_name,
                num: k.cigarNum,
                unit: "万支",
                // isTrend: k.yearOnYear > 0,
                radio: k.yearOnYear,
                value: k.cigarNum,
                src:
                  k.yearOnYear > 0
                    ? require("../../assets/common-new/red-top.png")
                    : require("../../assets/common-new/green-down.png"),
              };
            });
          //全省地区总和
          let total = res.outflowCityRanking.data.reduce(
            (pre, cur) => pre + cur.cigarNum,
            0
          );
          that.smokeFlowData.echartData = res.outflowCityRanking.data
            .slice(0, 5)
            .map((k) => {
              return {
                name: k.org_name,
                num: k.cigarNum,
                value: ((k.cigarNum / total) * 100).toFixed(2),
              };
            });
        })
        .then(() => {
          that.$refs.smokePie1.echartsInit();
        });
      // 流出品规
      getoutFlowGoodsRank({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      }).then((res) => {
        console.log(res, "流出品规==========");
        if (that.dataLoadingCnt == 1) {
          that.updateDtQuestion116(res);
        }
        that.smokeFlowData.produceRank = res.outflowGoodsNameRanking.data
          .slice(0, 5)
          .map((k) => {
            return {
              place: k.brand_name,
              num: k.num,
              unit: "万支",
              // isTrend: k.yearOnYear > 0,
              src:
                k.yearOnYear > 0
                  ? require("../../assets/common-new/red-top.png")
                  : require("../../assets/common-new/green-down.png"),
              radio: k.yearOnYear,
              value: k.num,
            };
          });
      });
      // 查获数据
      getInFlowCityRank({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      })
        .then((res) => {
          console.log(res, "查获地区==========");
          if (that.dataLoadingCnt == 1) {
            that.updateDtQuestion117(res);
          }
          that.smokeSeizure.placeRank = res.inflowCityRanking.data
            .slice(0, 5)
            .map((k) => {
              return {
                place: getShortName(k.org_name),
                num: k.cigarNum,
                unit: "万支",
                // isTrend: k.yearOnYear > 0,
                radio: k.yearOnYear,
                value: k.cigarNum,
                src:
                  k.yearOnYear > 0
                    ? require("../../assets/common-new/green-top.png")
                    : require("../../assets/common-new/red-down.png"),
              };
            });
          //全省地区总和
          let total = res.inflowCityRanking.data.reduce(
            (pre, cur) => pre + cur.cigarNum,
            0
          );
          that.smokeSeizure.echartData = res.inflowCityRanking.data
            .slice(0, 5)
            .map((k) => {
              return {
                name: k.org_name,
                num: k.cigarNum,
                value: ((k.cigarNum / total) * 100).toFixed(2),
              };
            });
        })
        .then(() => {
          that.$refs.smokePie2.echartsInit();
        });
      // 查获品规top5
      getInFlowGoodsRank({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      }).then((res) => {
        console.log(res, "查获品规==========");
        if (that.dataLoadingCnt == 1) {
          that.updateDtQuestion118(res);
        }
        that.smokeSeizure.produceRank = res.inflowGoodsNameRanking.data
          .slice(0, 5)
          .map((k) => {
            return {
              place: k.goods_name,
              num: k.cigarNum,
              unit: "万支",
              // isTrend: k.yearOnYear > 0,
              src:
                k.yearOnYear > 0
                  ? require("../../assets/common-new/green-top.png")
                  : require("../../assets/common-new/red-down.png"),
              radio: k.yearOnYear,
              value: k.cigarNum,
            };
          });
      });
      // 真烟流出总量（万支）及同比
      getOutFlowTotalNum({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      }).then((res) => {
        console.log(res, "真烟流出总量（万支）及同比==========");
        that.smokeFlowData.kindArr = [
          {
            name: "流出量",
            unit: "万支",
            num: res.outflowTotalNumYearonyear.data[0].cigarNum,
          },
          {
            name: "同比",
            unit: "",
            num: res.outflowTotalNumYearonyear.data[0].yearOnYear,
            isTrend: res.outflowTotalNumYearonyear.data[0].yearOnYear > 0,
          },
        ];
      });
      // 真烟查获总量（万支）及同比
      getInFlowTotalNum({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      }).then((res) => {
        console.log(res, "真烟查获总量（万支）及同比==========");
        that.smokeSeizure.kindArr = [
          {
            name: "查获量",
            unit: "万支",
            num: res.inflowTotalNumYearonyear.data[0].cigarNum,
          },
          {
            name: "同比",
            unit: "",
            num: res.inflowTotalNumYearonyear.data[0].yearOnYear,
            isTrend: res.inflowTotalNumYearonyear.data[0].yearOnYear > 0,
          },
        ];
      });
      // 真烟流出案件统计
      getOutFlowStat({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      })
        .then((res) => {
          console.log(res, "真烟流出案件统计==========");
          if (that.dataLoadingCnt == 1) {
            that.updateDtQuestion120(res);
          }
          // that.smokeCase.totalTrend.data = res.outflowStat.data.map(
          //   (k) => k.total_case_branch_qty
          // );
          // that.smokeCase.totalTrend.lineData = res.outflowStat.data.map(
          //   (k) => k.case_num
          // );
          that.smokeCase.totalTrend.data=[]
          that.smokeCase.totalTrend.lineData=[]
          that.smokeCase.totalTrend.codes.forEach(item=>{
            let  it = res.outflowStat.data.find(
             (k) => k.both_type==item
           );
          console.log(it);
          that.smokeCase.totalTrend.data.push(it.total_case_branch_qty)
          that.smokeCase.totalTrend.lineData.push(it.case_num)

         })
         console.log('123123',that.smokeCase.totalTrend);
        })
        .then(() => {
          that.$refs.smokeCaseLine.echartsInit();
        });
      // 真烟查获案件统计
      getInFlowStat({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      }).then((res) => {
        console.log(res, "真烟查获案件统计==========");
        if (that.dataLoadingCnt == 1) {
          that.updateDtQuestion119(res);
        }
        that.smokeCase.flowTrend.data = res.inflowStat.data.map(
          (k) => k.total_case_branch_qty
        );
        that.smokeCase.flowTrend.lineData = res.inflowStat.data.map(
          (k) => k.case_num
        );
      });
      // 预警产生数及同比
      getWarnNum({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      })
        .then((res) => {
          console.log(res, "预警产生数及同比==========");
          if (that.dataLoadingCnt == 1) {
            that.updateDtQuestion123(res);
          }
          that.earlyWarningData = {
            kindArr: [
              {
                name: "预警产生数",
                unit: "条",
                num: res.warnNumYearonyear.data[0].num,
              },
              {
                name: "同比",
                unit: "",
                num: res.warnNumYearonyear.data[0].yearOnYear,
                isTrend: res.warnNumYearonyear.data[0].yearOnYear > 0,
              },
            ],
            echartData: {
              valueArr: res.cityWarnNumTopN.data.slice(0, 5).map((k) => k.num),
              areaArr: res.cityWarnNumTopN.data
                .slice(0, 5)
                .map((k) => {return getShortName(k.org_name)}),
            },
          };
        })
        .then(() => {
          that.$refs.sleCategory.echartsInit();
        });
      // 监督检查及同比
      getCheckStat({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      }).then((res) => {
        console.log(res, "监督检查及同比==========");
        if (that.dataLoadingCnt == 1) {
          that.updateDtQuestion125(res);
        }
        that.superReviewData.reviewList.forEach(
          (k) => (k.value = res[k.code].data[0].num)
        );
      });
      // 外流重点户及同比
      getOutflowLargeLicNum({
        columnName,
        columnName1,
        columnName2,
        columnName3,
        orgUuid,
        limit: 10,
        ...that.picktimeTemp,
      })
        .then((res) => {
          console.log(res, "外流重点户及同比==========");
          if (that.dataLoadingCnt == 1) {
            that.updateDtQuestion124(res);
          }
          that.keyHouseholdData = {
            kindArr: [
              {
                name: "外流重点户",
                unit: "户",
                num: res.outflowLargeLicData.data[0].num,
              },
              {
                name: "同比",
                unit: "",
                num: res.outflowLargeLicData.data[0].yearOnYear,
                isTrend: res.outflowLargeLicData.data[0].yearOnYear > 0,
              },
            ],
            echartData: {
              valueArr: res.outflowLargeLicNumCityTopN.data
                .slice(0, 5)
                .map((k) => k.num),
              areaArr: res.outflowLargeLicNumCityTopN.data
                .slice(0, 5)
                .map((k) => k.org_name),
            },
          };
        })
        .then(() => {
          that.$refs.outFlowClient.echartsInit();
        });
      that.dataLoadingCnt++
    },
    tabSecondHandle(index) {
      let that = this;
      that.tabFlagSecond = index;
      if (!index) {
        // 查获地区
        that.$nextTick(() => that.$refs.smokePie2.echartsInit());
      }
    },
    tabHandle(index) {
      let that = this;
      this.tabFlag = index;
      if (!index) {
        // 流出地区
        that.$nextTick(() => that.$refs.smokePie1.echartsInit());
      }
    },
    secondaryTabHandle(index) {
      let that = this;
      this.tabSmallFlag = index;
      if (!index) {
        // 真烟流出
        that.$nextTick(() => that.$refs.smokeCaseLine.echartsInit());
      } else {
        // 真烟查获
        that.$nextTick(() => that.$refs.smokeCaseLine0.echartsInit());
      }
    },
    lineTabHandle(index) {
      this.lineFlag = index;
      let that = this;
      if (index === 0) {
        this.showWhatecharts = true;
        that.$nextTick(() => that.$refs.provine.init(that.listWl));
      } else {
        this.showWhatecharts = false;
      }
    },
    isShow(index, type) {
      if (index == 0) {
        this.popShow = true;
        this.popFlag = type;
      }
    },
    isHide(val) {
      this.popFlag = "";
      this.popShow = val;
    },
    isClose() {
      this.popFlag = "";
      this.popShow = false;
    },
    /////地图不是3d的开始
    mapneiguan(id) {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById(id));
      let imgUrl = require("../../assets/qjzl/dialogbg.png");
      console.log( "asdadasdasdsdasdadasdasdasdada");
      //阴影区域


      let options = {
       /*  tooltip: {
          show: true,
          backgroundColor: "rgba(0,0,0,0)",
          borderWidth: "0",
          formatter: function (params) {
            var res = `<div style="min-width:280px;background:url(${imgUrl}) no-repeat;background-size:100% 100%;padding:20px 30px;">
                  <div style="width:100%;margin:0 auto;padding:0 auto;text-align:center;font-size:16px;font-weight:bold;color:#fff;">
                    ${params.name}
                  </div>
                    ${that.formatterCustom(params.data)}
                </div>`;

            return res;
          },
        }, */
        // 地图的阴影底图
        geo: {
          map: "Anhui",
          zoom: 1.2,
          top: "15px",
          roam: false,
          layoutCenter: ["50%", "50%"], //位置
          layoutSize: "80%", //大小
          itemStyle: {
            normal: {
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#09132c", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#274d68", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              borderWidth: 6, //设置外层边框
              borderColor: "rgba(66, 199, 222,1)",
              shadowColor: "rgb(59, 11, 62)",
              shadowOffsetX: 10,
              shadowOffsetY: 11,
            },
          },
        },
        series: [
          {
            type: "map",
            map: "Anhui",
            top: "50px",
            // aspectScale: 0.9,
            // layoutCenter: ["50%", "50%"], //地图位置
            // layoutSize: "100%",
            layoutCenter: ["50%", "50%"], //位置
            layoutSize: "80%", //大小
            zoom: 1.2,
            label: {
              normal: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "12",
                color: "#FEFEFE",
              },
              emphasis: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "12",
                color: "#FEFEFE",
              },
            },
            itemStyle: {
              areaColor: "rgba(5, 107, 158, 1)",
              color: "#2B5890", //地图颜色
              // borderWidth: 2, //分界线wdith
              // borderColor: "#000", //分界线颜色
              borderColor: "rgba(9, 13, 63,1)",
              borderWidth: 1,
              emphasis: {
                show: true,
                areaColor: "#ff7200", //鼠标滑过区域颜色
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
            },
            // zlevel: 1,
            data: that.regionsdata,
          },
        ],
      };
      // myChart.showLoading();
      this.$nextTick(() => {
        this.$echarts.registerMap("Anhui", this.dataMap);
        myChart.setOption(options, false);
        myChart.resize();
        myChart.hideLoading();
        myChart.off("dblclick");
        myChart.off("click");
        myChart.on("click", (data) => {
        // console.log('点击地图123456',data,options);
        // 先清空所有高亮
        myChart.dispatchAction({
           type: 'downplay',
           seriesIndex: 0,
        })
        // 再高亮点击的区域
        myChart.dispatchAction({
           type: 'highlight',
           seriesIndex: data.seriesIndex,
           dataIndex: data.dataIndex
        })
          this.changeMap(data.data, data.name)
        });
      });
    },
    /////地图不是3d的结束
  /*   mapshow(map, id) {
      let that = this;
      //阴影区域
      let option = {
        // top:'-180px',
        // right:'-40px',

        series: [
          {
            type: "map3D",
            zoom: 2,

            top: "1%",
            selectedMode: "single", //地图高亮单选
            regionHeight: 40, //地图高度
            map: map.ename,
            viewControl: {
              center: [-10, 0, 0],
              distance: 210, //地图视角 控制初始大小
              autoRotate: false,
              rotateSensitivity: 0,
              alpha: 80, //视角绕 x 轴，即上下旋转的角度
              // rotateSensitivity: [1, 1],
              animation: true,
              zoomSensitivity: false, //是否开启缩放和平移/鼠标滑动缩放禁止
            },
            //  zoomSensitivity: false,//是否开启缩放和平移/鼠标滑动缩放禁止
            label: {
              show: true, //是否显示市
              textStyle: {
                color: "#fff", //文字颜色
                fontSize: 12, //文字大小
                // backgroundColor: "rgba(0,0,0,0)",
              },
              formatter: function (param) {
                var str = "   " + param.data.littitle + "\n" + param.data.namea;
                // var str = param.data.namea;
                // console.log(param)
                return str;
              },
            },
            itemStyle: {
              // areaColor: 'red',
              color: "#2B5890", //地图颜色
              borderColor: "rgba(17, 44, 112, .7)",
              borderWidth: 0.4,
              // borderWidth: 2, //分界线wdith
              // borderColor: "#000", //分界线颜色
            },

            // emphasis: {
            //     show: false,
            //     //   label: {
            //     //     show: true, //是否显示高亮
            //     //     textStyle: {
            //     //       color: "#fff", //高亮文字颜色
            //     //     },
            //     //   },
            //     //   itemStyle: {
            //     //     color: "#0489d6", //地图高亮颜色
            //     //   },
            // },
            data: this.regionsdata,
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById(id));
      myChart.showLoading();
      this.$echarts.registerMap(map.ename, map.ename);
      this.$nextTick(() => {
        // 初始化地图
        myChart.setOption(option, false);

        myChart.resize();
        myChart.hideLoading();
      });

      //mapbar
    }, */

    changeMap(dbArea, name) {
      // console.log(dbArea,name, "双击地图下钻");

      let that = this;
      that.titleMap.name = name;
      that.titleMap.level=2;
      // console.log(dbArea,name,that.titleMap.level, "双击地图下钻");

      if (that.clickArea.length == 2) that.clickArea.pop() 
      if (that.clickArea.length < 2) that.clickArea.push(that.titleMap.name);
      if (that.titleMap.level == 2) {
        that.initData("city_org_uuid","city_org_uuid","county_org_uuid","county_org_name",dbArea.uuid, name);
      }
    },
     // 地图返回
     mapBack(index) {
      let that = this;
      that.titleMap.level = index + 1;
      console.log(index, "地图返回试试,");
      if (that.titleMap.level == 1) {
        this.$echarts.init(document.getElementById('neiguan')).dispose()
       this.mapneiguan("neiguan");
        that.clickArea = [];
        that.titleMap.name = "安徽省";
        that.titleMap.uuid = "00000000000000000000000011340001";
        that.clickArea.push(that.titleMap.name);
        console.log(that.titleMap, "地图返回,");
        that.initData(
          "prov_org_uuid",
          "prov_org_uuid",
          "city_org_uuid",
          "city_org_name",
          that.titleMap.uuid,
          that.titleMap.name,
        );
      }
    },
    formatterCustom(data) {
      return `<div class="content">

<div class="info">

<span class="infoText">案件数量：</span>

<span class="infoNum">${data?.value || 0}</span>

<span class="infoUnit">起</span>

</div>
        <div class="info">

<span class="infoText">5万元以上案件：</span>

<span class="infoNum">${data?.value1 || 0}</span>

<span class="infoUnit">起</span>

</div>
        <div class="info">

<span class="infoText">查获卷烟：</span>

<span class="infoNum">${data?.value2 || 0}</span>

<span class="infoUnit">万支</span>

</div>
        <div class="info">

<span class="infoText">涉案案值：</span>

<span class="infoNum">${data?.value3 || 0}</span>

<span class="infoUnit">万元</span>

</div>

</div>`;
    },
    //真烟各地区流出量
    updateDtQuestion115(res){
      let params = {
        id: 'q115',
        d1: res.outflowCityRanking.data[0]?.org_name + ",共计流出" + res.outflowCityRanking.data[0]?.cigarNum + "万支"+(res.outflowCityRanking.data[0]?.yearOnYear>0?",同比增长"+res.outflowCityRanking.data[0]?.yearOnYear+"%":",同比下降"+Math.abs(res.outflowCityRanking.data[0]?.yearOnYear)+"%"),
        d2: res.outflowCityRanking.data[1]?.org_name + ",共计流出" + res.outflowCityRanking.data[1]?.cigarNum + "万支"+(res.outflowCityRanking.data[1]?.yearOnYear>0?",同比增长"+res.outflowCityRanking.data[1]?.yearOnYear+"%":",同比下降"+Math.abs(res.outflowCityRanking.data[1]?.yearOnYear)+"%"),
        d3: res.outflowCityRanking.data[2]?.org_name + ",共计流出" + res.outflowCityRanking.data[2]?.cigarNum + "万支"+(res.outflowCityRanking.data[2]?.yearOnYear>0?",同比增长"+res.outflowCityRanking.data[2]?.yearOnYear+"%":",同比下降"+Math.abs(res.outflowCityRanking.data[2]?.yearOnYear)+"%"),
        d4: res.outflowCityRanking.data[3]?.org_name + ",共计流出" + res.outflowCityRanking.data[3]?.cigarNum + "万支"+(res.outflowCityRanking.data[3]?.yearOnYear>0?",同比增长"+res.outflowCityRanking.data[3]?.yearOnYear+"%":",同比下降"+Math.abs(res.outflowCityRanking.data[3]?.yearOnYear)+"%"),
        d5: res.outflowCityRanking.data[4]?.org_name + ",共计流出" + res.outflowCityRanking.data[4]?.cigarNum + "万支"+(res.outflowCityRanking.data[4]?.yearOnYear>0?",同比增长"+res.outflowCityRanking.data[4]?.yearOnYear+"%":",同比下降"+Math.abs(res.outflowCityRanking.data[4]?.yearOnYear)+"%"),
        hlPosition : "left:609px,top:448px",
        link:'地区流出'
      }
      updateDtQuestion(params);
    },
    //真烟品规流出情况
    updateDtQuestion116(res){
      let params = {
        id: 'q116',
        d1: res.outflowGoodsNameRanking.data[0]?.brand_name + ",共计流出" + res.outflowGoodsNameRanking.data[0]?.num + "万支"+(res.outflowGoodsNameRanking.data[0]?.yearOnYear>0?",同比增长"+res.outflowGoodsNameRanking.data[0]?.yearOnYear+"%":",同比下降"+Math.abs(res.outflowGoodsNameRanking.data[0]?.yearOnYear)+"%"),
        d2: res.outflowGoodsNameRanking.data[1]?.brand_name + ",共计流出" + res.outflowGoodsNameRanking.data[1]?.num + "万支"+(res.outflowGoodsNameRanking.data[1]?.yearOnYear>0?",同比增长"+res.outflowGoodsNameRanking.data[1]?.yearOnYear+"%":",同比下降"+Math.abs(res.outflowGoodsNameRanking.data[1]?.yearOnYear)+"%"),
        d3: res.outflowGoodsNameRanking.data[2]?.brand_name + ",共计流出" + res.outflowGoodsNameRanking.data[2]?.num + "万支"+(res.outflowGoodsNameRanking.data[2]?.yearOnYear>0?",同比增长"+res.outflowGoodsNameRanking.data[2]?.yearOnYear+"%":",同比下降"+Math.abs(res.outflowGoodsNameRanking.data[2]?.yearOnYear)+"%"),
        d4: res.outflowGoodsNameRanking.data[3]?.brand_name + ",共计流出" + res.outflowGoodsNameRanking.data[3]?.num + "万支"+(res.outflowGoodsNameRanking.data[3]?.yearOnYear>0?",同比增长"+res.outflowGoodsNameRanking.data[3]?.yearOnYear+"%":",同比下降"+Math.abs(res.outflowGoodsNameRanking.data[3]?.yearOnYear)+"%"),
        d5: res.outflowGoodsNameRanking.data[4]?.brand_name + ",共计流出" + res.outflowGoodsNameRanking.data[4]?.num + "万支"+(res.outflowGoodsNameRanking.data[4]?.yearOnYear>0?",同比增长"+res.outflowGoodsNameRanking.data[4]?.yearOnYear+"%":",同比下降"+Math.abs(res.outflowGoodsNameRanking.data[4]?.yearOnYear)+"%"),
        hlPosition : "left:609px,top:448px",
        link:'品规流出'
      }
      updateDtQuestion(params);
    },
    //真烟各地区流出量
    updateDtQuestion117(res){
      let params = {
        id: 'q117',
        d1: res.inflowCityRanking.data[0]?.org_name + ",共计查获" + res.inflowCityRanking.data[0]?.cigarNum + "万支"+(res.inflowCityRanking.data[0]?.yearOnYear>0?",同比增长"+res.inflowCityRanking.data[0]?.yearOnYear+"%":",同比下降"+Math.abs(res.inflowCityRanking.data[0]?.yearOnYear)+"%"),
        d2: res.inflowCityRanking.data[1]?.org_name + ",共计查获" + res.inflowCityRanking.data[1]?.cigarNum + "万支"+(res.inflowCityRanking.data[1]?.yearOnYear>0?",同比增长"+res.inflowCityRanking.data[1]?.yearOnYear+"%":",同比下降"+Math.abs(res.inflowCityRanking.data[1]?.yearOnYear)+"%"),
        d3: res.inflowCityRanking.data[2]?.org_name + ",共计查获" + res.inflowCityRanking.data[2]?.cigarNum + "万支"+(res.inflowCityRanking.data[2]?.yearOnYear>0?",同比增长"+res.inflowCityRanking.data[2]?.yearOnYear+"%":",同比下降"+Math.abs(res.inflowCityRanking.data[2]?.yearOnYear)+"%"),
        d4: res.inflowCityRanking.data[3]?.org_name + ",共计查获" + res.inflowCityRanking.data[3]?.cigarNum + "万支"+(res.inflowCityRanking.data[3]?.yearOnYear>0?",同比增长"+res.inflowCityRanking.data[3]?.yearOnYear+"%":",同比下降"+Math.abs(res.inflowCityRanking.data[3]?.yearOnYear)+"%"),
        d5: res.inflowCityRanking.data[4]?.org_name + ",共计查获" + res.inflowCityRanking.data[4]?.cigarNum + "万支"+(res.inflowCityRanking.data[4]?.yearOnYear>0?",同比增长"+res.inflowCityRanking.data[4]?.yearOnYear+"%":",同比下降"+Math.abs(res.inflowCityRanking.data[4]?.yearOnYear)+"%"),
        hlPosition : "left:609px,top:448px",
        link:'地区查获'
      }
      updateDtQuestion(params);
    },
    //真烟品规流出情况
    updateDtQuestion118(res){
      let params = {
        id: 'q118',
        d1: res.inflowGoodsNameRanking.data[0]?.goods_name + ",共计查获" + res.inflowGoodsNameRanking.data[0]?.cigarNum + "万支"+(res.inflowGoodsNameRanking.data[0]?.yearOnYear>0?",同比增长"+res.inflowGoodsNameRanking.data[0]?.yearOnYear+"%":",同比下降"+Math.abs(res.inflowGoodsNameRanking.data[0]?.yearOnYear)+"%"),
        d2: res.inflowGoodsNameRanking.data[1]?.goods_name + ",共计查获" + res.inflowGoodsNameRanking.data[1]?.cigarNum + "万支"+(res.inflowGoodsNameRanking.data[1]?.yearOnYear>0?",同比增长"+res.inflowGoodsNameRanking.data[1]?.yearOnYear+"%":",同比下降"+Math.abs(res.inflowGoodsNameRanking.data[1]?.yearOnYear)+"%"),
        d3: res.inflowGoodsNameRanking.data[2]?.goods_name + ",共计查获" + res.inflowGoodsNameRanking.data[2]?.cigarNum + "万支"+(res.inflowGoodsNameRanking.data[2]?.yearOnYear>0?",同比增长"+res.inflowGoodsNameRanking.data[2]?.yearOnYear+"%":",同比下降"+Math.abs(res.inflowGoodsNameRanking.data[2]?.yearOnYear)+"%"),
        d4: res.inflowGoodsNameRanking.data[3]?.goods_name + ",共计查获" + res.inflowGoodsNameRanking.data[3]?.cigarNum + "万支"+(res.inflowGoodsNameRanking.data[3]?.yearOnYear>0?",同比增长"+res.inflowGoodsNameRanking.data[3]?.yearOnYear+"%":",同比下降"+Math.abs(res.inflowGoodsNameRanking.data[3]?.yearOnYear)+"%"),
        d5: res.inflowGoodsNameRanking.data[4]?.goods_name + ",共计查获" + res.inflowGoodsNameRanking.data[4]?.cigarNum + "万支"+(res.inflowGoodsNameRanking.data[4]?.yearOnYear>0?",同比增长"+res.inflowGoodsNameRanking.data[4]?.yearOnYear+"%":",同比下降"+Math.abs(res.inflowGoodsNameRanking.data[4]?.yearOnYear)+"%"),
        hlPosition : "left:609px,top:448px",
        link:'品规查获'
      }
      updateDtQuestion(params);
    },
    //真烟品规流出情况
    updateDtQuestion119(res){
      let params = {
        id: 'q119',
        d1: '真烟双2案件,共计查获案件数'+res.inflowStat.data[0]?.case_num+'起,卷烟数量'+res.inflowStat.data[0]?.total_case_branch_qty+'万支,涉案金额'+res.inflowStat.data[0]?.total_case_value+'万元',
        d2: '真烟双5案件,共计查获案件数'+res.inflowStat.data[1]?.case_num+'起,卷烟数量'+res.inflowStat.data[1]?.total_case_branch_qty+'万支,涉案金额'+res.inflowStat.data[1]?.total_case_value+'万元',
        d3: '真烟双10案件,共计查获案件数'+res.inflowStat.data[2]?.case_num+'起,卷烟数量'+res.inflowStat.data[2]?.total_case_branch_qty+'万支,涉案金额'+res.inflowStat.data[2]?.total_case_value+'万元',
        d4: '真烟双20案件,共计查获案件数'+res.inflowStat.data[3]?.case_num+'起,卷烟数量'+res.inflowStat.data[3]?.total_case_branch_qty+'万支,涉案金额'+res.inflowStat.data[3]?.total_case_value+'万元',
        d5: '真烟双30案件,共计查获案件数'+res.inflowStat.data[4]?.case_num+'起,卷烟数量'+res.inflowStat.data[4]?.total_case_branch_qty+'万支,涉案金额'+res.inflowStat.data[4]?.total_case_value+'万元',
        hlPosition : "left:305px,top:836px",
        link:'重大案件查获'
      }
      updateDtQuestion(params);
    },
    //真烟品规流出情况
    updateDtQuestion120(res){
      let params = {
        id: 'q120',
        d1: '真烟单2案件,共计流出案件数'+res.outflowStat.data[0]?.case_num+'起,卷烟数量'+res.outflowStat.data[0]?.total_case_branch_qty+'万支',
        d2: '真烟单5案件,共计流出案件数'+res.outflowStat.data[1]?.case_num+'起,卷烟数量'+res.outflowStat.data[1]?.total_case_branch_qty+'万支',
        d3: '真烟单10案件,共计流出案件数'+res.outflowStat.data[2]?.case_num+'起,卷烟数量'+res.outflowStat.data[2]?.total_case_branch_qty+'万支',
        d4: '真烟单20案件,共计流出案件数'+res.outflowStat.data[3]?.case_num+'起,卷烟数量'+res.outflowStat.data[3]?.total_case_branch_qty+'万支',
        d5: '真烟单30案件,共计流出案件数'+res.outflowStat.data[4]?.case_num+'起,卷烟数量'+res.outflowStat.data[4]?.total_case_branch_qty+'万支',
        hlPosition : "left:305px,top:836px",
        link:'重大案件流出'
      }
      updateDtQuestion(params);
    },
    //真烟外流总量趋势
    updateDtQuestion121(res){
      let params = {
        id: 'q121',
        hlPosition : "left:1111px,top:825px",
        link:'真烟外流总量趋势'
      }
      let currentDate = new Date();
      let currentYear = currentDate.getFullYear();
      let d1 = '';
      res.outflowTotalNumTrend.data.forEach((item, index) => {
        if (item.yearMonth.startsWith(currentYear + '.')) {
          d1 = d1 + item.yearMonth.split('.')[0] + '年' + item.yearMonth.split('.')[1] + '月' + (item.cigarNum > 0 ? '流出' + item.cigarNum + '万支' : '未流出')
          if (index != res.outflowTotalNumTrend.data.length - 1) {
            d1 = d1 + ','
          }
        }
      });
      params.d1= d1;
      updateDtQuestion(params);
    },
    //真烟外流流销比趋势
    updateDtQuestion122(res){
      let params = {
        id: 'q122',
        hlPosition : "left:1111px,top:825px",
        link:'真烟外流流销比趋势'
      }
      let currentDate = new Date();
      let currentYear = currentDate.getFullYear();
      let d1 = '';
      res.outflowSaleRadioTrend.data.forEach((item, index) => {
        if (item.yearMonth.startsWith(currentYear + '.')) {
          d1 = d1 + item.yearMonth.split('.')[0] + '年' + item.yearMonth.split('.')[1] + '月为' + (item.outflowCigarSaleCigarRatio*100).toFixed(2)+'%'
          if (index != res.outflowSaleRadioTrend.data.length - 1) {
            d1 = d1 + ','
          }
        }
      });
      params.d1= d1;
      updateDtQuestion(params);
    },
    //真烟外流流销比趋势
    updateDtQuestion123(res){
      let params = {
        id: 'q123',
        d1: (res.warnNumYearonyear.data[0]?.num/10000).toFixed(2),
        d2: res.cityWarnNumTopN.data[0]?.org_name+','+(res.cityWarnNumTopN.data[0]?.num/10000).toFixed(2)+'万条',
        d3: res.cityWarnNumTopN.data[1]?.org_name+','+(res.cityWarnNumTopN.data[1]?.num/10000).toFixed(2)+'万条',
        d4: res.cityWarnNumTopN.data[2]?.org_name+','+(res.cityWarnNumTopN.data[2]?.num/10000).toFixed(2)+'万条',
        d5: res.cityWarnNumTopN.data[3]?.org_name+','+(res.cityWarnNumTopN.data[3]?.num/10000).toFixed(2)+'万条',
        d6: res.cityWarnNumTopN.data[4]?.org_name+','+(res.cityWarnNumTopN.data[4]?.num/10000).toFixed(2)+'万条',
        hlPosition : "left:305px,top:836px",
        link:'真烟外流流销比趋势'
      }
      updateDtQuestion(params);
    },
    //外流重点户
    updateDtQuestion124(res){
      let params = {
        id: 'q124',
        d1: res.outflowLargeLicData.data[0]?.num,
        d2: (res.outflowLargeLicData.data[0]?.yearOnYear > 0 ? '上升' : '下降') + Math.abs(res.outflowLargeLicData.data[0]?.yearOnYear),
        d3: res.outflowLargeLicNumCityTopN.data[0]?.org_name,
        d4: res.outflowLargeLicNumCityTopN.data[0]?.num,
        hlPosition : "left:1586px,top:757px",
        link:'外流重点户'
      }
      updateDtQuestion(params);
    },
    //监督检查
    updateDtQuestion125(res){
      let params = {
        id: 'q125',
        d1: res.checkData.data[0]?.num,
        d2: res.abnormalData.data[0]?.num,
        d3: res.suggestData.data[0]?.num,
        d4: res.feedbackData.data[0]?.num,
        hlPosition : "left:1562px,top:559px",
        link:'监督检查'
      }
      updateDtQuestion(params);
    }
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/scss/qjzl-neiguan.scss";
.innerzon {
  width: 100%;
  display: flex;
}
.mask-postion {
  width: 100%;
  height: 100%;
  background: rgba(16, 11, 42, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
// 头部公共样式
.public-top {
  width: 420px;
  height: 38px;
  // background: url(../../assets/img/ng-lefttitle.png) no-repeat;
  background-size: 100% 100%;
  padding-left: 38px;
  white-space: nowrap;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  display: flex;
  align-items: center;

  &.true-flow {
    width: 100%;
    height: 47px;
    background: url(../../assets/neiguan-new/true-different-title.png) no-repeat;
  }
  &.true-case {
    width: 100%;
    height: 47px;
    background: url(../../assets/neiguan-new/true-case-title.png) no-repeat;
  }
  &.warning-check {
    width: 100%;
    height: 47px;
    background: url(../../assets/neiguan-new/warning-monitor-title.png)
      no-repeat;
  }
  &.watch-check {
    width: 100%;
    height: 47px;
    background: url(../../assets/neiguan-new/watch-check-title.png) no-repeat;
  }
  &.out-flow {
    width: 100%;
    height: 47px;
    background: url(../../assets/neiguan-new/out-flow-important-client-title.png)
      no-repeat;
  }
}

.big-public-top {
  width: 100%;
  height: 45px;
  background: url(../../assets/neiguan-new/true-flow-qushifenxi-title.png);
  background-size: 100% 100% !important;
  // padding-left: 38px;
  white-space: nowrap;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  display: flex;
  // align-items: center;
  line-height: 45px;
}
.smoke-trend-tab {
  // padding-left: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  & > div {
    width: 218px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
    // font-family: Source Han Sans CN;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #5e7595;
    background: url(../../assets/neiguan-new/data-tag-notchoose.png) no-repeat;
    background-size: 100% 100%;
    background-origin: border-box;
  }
  & > div:last-child {
    // margin-left: 16px;
  }
  .tabsmall-is-check {
    background: url(../../assets/neiguan-new/data-tag-chose.png);
    background-size: 100% 100%;
    background-origin: border-box;
    color: #43c6dd;
  }
  .sc-main {
    width: 100%;
    height: 162px;
  }
}

// 21号蓝色字体样式
.big-num {
  font-size: 21px;
  // font-family: Source Han Sans CN;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  color: #34effe;
  b {
    font-size: 14px;
    color: #fff;
  }
  img {
    width: 12px;
    height: 16px;
    margin-left: 8px;
  }
}

//18号蓝色字体样式
.small-num {
  font-size: 14px;
  // font-family: Source Han Sans CN;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  color: #34effe;
}

.left-module {
  max-width: 482px;
  flex: 1;
  flex-shrink: 0;
  .smoke-flow {
    width: 100%;
    height: 620px;
    .sf-main {
      width: 457px;
      height: 620px;
      background: url(../../assets/neiguan-new/true-different-bg.png) no-repeat;
      background-size: 100% 92%;
      background-origin: border-box;
      overflow: hidden;
      .sf-topic {
        width: 428px;
        height: 26px;
        margin: 8px auto 10px;
        box-sizing: border-box;
        font-size: 14px;
        // font-family: Source Han Sans CN;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        color: #ffffff;
        padding-left: 38px;
        line-height: 32px;
        background: url(../../assets/img/ng-topic-bg.png);
        background-size: 100% 100%;
        background-origin: border-box;
        &.true-out-flow {
          background: url(../../assets/neiguan-new/true-flow-title.png);
        }
        &.true-check {
          background: url(../../assets/neiguan-new/true-check-bg.png);
        }
      }

      .sf-con-main {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        justify-content: space-around;
        // padding: 0 37px;
        .sfcm-item {
          // flex: 1;
          width: 170px;
          height: 50px;
          // display: flex;
          // align-items: center;
          .icon {
            width: 50px;
            height: 46px;
            margin-right: 13px;
          }
          .sfcm-item-detail {
            // padding-left: 20px;
            font-size: 14px;
            // font-family: Source Han Sans CN;
            font-family: MicrosoftYaHei;
            font-weight: bold;
            color: #ffffff;
            line-height: 1.2;
            background: url(../../assets/neiguan-new/data-pie.png);
            background-size: 100% 100%;
            .pie-detail {
              .big-num {
                width: 100%;
                text-align: center;
              }
              & > span {
                width: 100%;
                text-align: center;
              }
            }
          }
        }
      }

      .sf-list-tab {
        padding-top: 2px;
        padding-bottom: 7px;
        display: flex;
        align-items: center;
        margin-left: 16px;
        .item {
          width: 218px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          font-size: 14px;
          // font-family: Source Han Sans CN;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: #39b3cd;
          background: url(../../assets/neiguan-new/data-tag-notchoose.png);
          background-size: 100% 100%;
          background-origin: border-box;
          &:last-child {
            margin-right: 9px;
          }
        }
        .is-check {
          background: url(../../assets/neiguan-new/data-tag-chose.png);
          background-size: 100% 100%;
          background-origin: border-box;
        }
      }

      .sf-list-main {
        // padding-right: 8px;
        display: flex;
        justify-content: space-between;
        .echart-pie {
          width: 127px;
          height: 127px;
          flex-shrink: 0;
        }
      }
    }
  }

  .smoke-case {
    width: 100%;
    height: 200px;
    margin-top: 5px;
    .sc-main {
      height: 180px;
      background: url(../../assets/neiguan-new/true-case-bg.png) no-repeat;
      background-size: 100% 100%;
      background-origin: border-box;
      overflow: hidden;
      padding-top: 5px;
      .smoke-case-tab {
        padding-left: 15px;
        display: flex;
        & > div {
          width: 218px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          font-size: 14px;
          // font-family: Source Han Sans CN;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: #3ec2d9;
          background: url(../../assets/neiguan-new/data-tag-notchoose.png)
            no-repeat;
          background-size: 100% 100%;
          background-origin: border-box;
        }
        & > div:last-child {
          // margin-left: 16px;
        }
        .tabsmall-is-check {
          background: url(../../assets/neiguan-new/data-tag-chose.png);
          background-size: 100% 100%;
          background-origin: border-box;
        }
        .sc-main {
          width: 100%;
          height: 162px;
        }
      }
    }
  }
}

.center-module {
  flex: auto;
  height: 100%;
  margin: 40px 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .map-style {
    width: 100%;
    height: 576px;
  }
  .smoke-trend {
    height: 315px;
    display: flex;
    flex-direction: column;
    .smoke-trend-main {
      width: 100%;
      height: 193px;
      background: url(../../assets/neiguan-new/true-flow-qushifenxi-bg.png);
      background-size: 100% 100%;
      background-origin: border-box;
    }
  }
}

// 右边
.right-module {
  width: 504px;
  flex-shrink: 0;
  .early-warning {
    height: 328px;
    .ew-main {
      height: 290px;
      background: url(../../assets/neiguan-new/warning-monitor-bg.png);
      background-size: 100% 100%;
      background-origin: border-box;
      .ew-con-main {
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 16px 37px 6px;
        .sfcm-item {
          flex: 1;
          display: flex;
          align-items: center;
          .icon {
            width: 45px;
            height: 45px;
            margin-right: 10px;
          }
          .sfcm-item-detail {
            width: 170px;
            height: 50px;
            font-size: 14px;
            // font-family: Source Han Sans CN;
            font-family: MicrosoftYaHei;
            font-weight: bold;
            color: #ffffff;
            line-height: 1.2;
            background: url(../../assets/neiguan-new/data-pie.png);
            background-size: 100% 100%;
            .pie-detail {
              .big-num {
                width: 100%;
                text-align: center;
              }
              & > span {
                width: 100%;
                text-align: center;
              }
            }
          }
        }
      }

      .ew-topic {
        width: 483px;
        height: 26px;
        margin: 8px auto 10px;
        box-sizing: border-box;
        font-size: 14px;
        // font-family: Source Han Sans CN;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        color: #ffffff;
        padding-left: 38px;
        line-height: 32px;
        // background: url(../../assets/img/ng-topic1-bg.png);
        background-size: 100% 100%;
        background-origin: border-box;
        &.warning-check {
          background: url(../../assets/neiguan-new/unit-warning-title.png);
        }
      }
      .sle-category {
        width: 100%;
        height: 190px;
      }
    }
  }

  .super-review {
    height: 180px;
    margin-top: 20px;
    .sr-main {
      box-sizing: border-box;
      padding: 18px 8px 18px 13px;
      height: 142px;
      background: url(../../assets/neiguan-new/watch-check-bg.png);
      background-size: 100% 100%;
      background-origin: border-box;
      display: flex;
      flex-direction: column;
      .inspect-list {
        // flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .item {
          width: 180.5px;
          white-space: nowrap;
          background: url(../../assets/neiguan-new/watch-check-data.png)
            no-repeat;
          background-size: 100% 63%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 18px;
          .item-detail {
            font-size: 14px;
            // font-family: Source Han Sans CN;
            font-family: MicrosoftYaHei;
            font-weight: bold;
            color: #ffffff;
            & > span {
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }

  .key-household {
    height: 290px;
    margin-top: 20px;
    .kh-main {
      height: 285px;
      background: url(../../assets/neiguan-new/out-flow-important-client-TOP5-bg.png)
        no-repeat;
      background-size: 100% 90%;
      background-origin: border-box;
      .pictorialBar {
        width: 100%;
        height: 145px;
      }
      .ew-con-main {
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 16px 37px;
        .sfcm-item {
          flex: 1;
          display: flex;
          align-items: center;
          .icon {
            width: 45px;
            height: 45px;
            margin-right: 10px;
          }
          .sfcm-item-detail {
            width: 170px;
            height: 50px;
            font-size: 14px;
            // font-family: Source Han Sans CN;
            font-family: MicrosoftYaHei;
            font-weight: bold;
            color: #ffffff;
            line-height: 1.2;
            background: url(../../assets/neiguan-new/data-pie.png);
            background-size: 100% 100%;
            .pie-detail {
              .big-num {
                width: 100%;
                text-align: center;
              }
              & > span {
                width: 100%;
                text-align: center;
              }
            }
          }
        }
      }
      .ew-topic {
        width: 483px;
        height: 26px;
        margin: 8px auto 10px;
        box-sizing: border-box;
        font-size: 14px;
        // font-family: Source Han Sans CN;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        color: #ffffff;
        padding-left: 38px;
        line-height: 26px;
        // background: url(../../assets/img/ng-topic1-bg.png);
        background-size: 100% 100%;
        background-origin: border-box;
        &.out-flow-TOP5 {
          background: url(../../assets/neiguan-new/out-flow-important-client-TOP5-title.png);
        }
      }
    }
  }
}

::v-deep .content {
  width: 100%;

  .info {
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    background: rgba(41, 138, 255, 0.15);
    display: flex;
    align-items: center;

    .infoText {
      max-width: 150px;
    }

    .infoText,
    .infoUnit {
      font-size: 11px;
      font-weight: bold;
      color: #ffffff;
    }

    .infoUnit {
      width: 30px;
    }

    .infoNum {
      flex: 1;
      text-align: right;
      display: inline-block;
      font-size: 17px;
      font-weight: bold;
      color: #34effe;
      padding: 0 3px;
    }
  }
}
</style>
